Reacti useFormState muudatuste tuvastamine: vormi oleku erinevuste jälgimise meisterlikkus

Veebiarenduse dünaamilises maailmas on kasutajasõbralike ja tõhusate vormide loomine ülioluline. React, populaarne JavaScripti teek kasutajaliideste ehitamiseks, pakub erinevaid tööriistu vormide haldamiseks. Nende hulgas paistab silma useFormState hook oma võimega hallata ja jälgida vormi olekut. See põhjalik juhend süveneb Reacti useFormState'i peensustesse, keskendudes spetsiifiliselt muudatuste tuvastamisele ja erinevuste jälgimisele, mis võimaldab teil luua reageerivamaid ja jõudlusvõimelisemaid vorme.

Reacti useFormState hook'i mõistmine

useFormState hook lihtsustab vormi oleku haldamist, pakkudes tsentraliseeritud viisi sisendväärtuste, valideerimise ja esitamise käsitlemiseks. See kaotab vajaduse hallata käsitsi iga üksiku vormivälja olekut, vähendades korduvat koodi ja parandades koodi loetavust.

Mis on useFormState?

useFormState on kohandatud hook, mis on loodud vormi oleku haldamise sujuvamaks muutmiseks Reacti rakendustes. Tavaliselt tagastab see objekti, mis sisaldab:

• Oleku muutujad: Esindavad vormiväljade hetkeväärtusi.
• Uuendusfunktsioonid: Oleku muutujate muutmiseks, kui sisendväljad muutuvad.
• Valideerimisfunktsioonid: Vormiandmete valideerimiseks.
• Esitamise käsitlejad: Vormi esitamise käsitlemiseks.

useFormState kasutamise eelised

• Lihtsustatud olekuhaldus: Tsentraliseerib vormi oleku, vähendades keerukust.
• Vähem korduvat koodi: Kaotab vajaduse eraldi oleku muutujate ja uuendusfunktsioonide järele iga välja jaoks.
• Parem loetavus: Muudab vormi loogika lihtsamini mõistetavaks ja hooldatavaks.
• Parem jõudlus: Optimeerib uuesti renderdamisi, jälgides muudatusi tõhusalt.

Muudatuste tuvastamine Reacti vormides

Muudatuste tuvastamine on protsess, mille käigus tehakse kindlaks, millal vormi olek on muutunud. See on hädavajalik kasutajaliidese uuenduste käivitamiseks, vormiandmete valideerimiseks ning esitamisnuppude lubamiseks või keelamiseks. Tõhus muudatuste tuvastamine on reageeriva ja jõudlusvõimelise kasutajakogemuse säilitamiseks ülioluline.

Miks on muudatuste tuvastamine oluline?

• UI uuendused: Peegeldab vormiandmete muudatusi reaalajas.
• Vormi valideerimine: Käivitab valideerimisloogika, kui sisendväärtused muutuvad.
• Tingimuslik renderdamine: Kuvab või peidab elemente vastavalt vormi olekule.
• Jõudluse optimeerimine: Hoiab ära tarbetuid uuesti renderdamisi, uuendades ainult komponente, mis sõltuvad muutunud andmetest.

Levinud lähenemisviisid muudatuste tuvastamiseks

Reacti vormides on muudatuste tuvastamise rakendamiseks mitu viisi. Siin on mõned levinud lähenemisviisid:

• onChange käsitlejad: Põhiline lähenemisviis, mis kasutab onChange sündmust iga sisendvälja oleku uuendamiseks.
• Kontrollitud komponendid: Reacti komponendid, mis kontrollivad vormielementide väärtust oleku kaudu.
• useFormState hook: Keerukam lähenemisviis, mis tsentraliseerib olekuhalduse ja pakub sisseehitatud muudatuste tuvastamise võimalusi.
• Vormiteegid: Teegid nagu Formik ja React Hook Form pakuvad täiustatud funktsioone muudatuste tuvastamiseks ja vormi valideerimiseks.

Muudatuste tuvastamise rakendamine useFormState'iga

Uurime, kuidas rakendada muudatuste tuvastamist tõhusalt useFormState hook'i abil. Käsitleme tehnikaid muudatuste jälgimiseks, vormi olekute võrdlemiseks ja jõudluse optimeerimiseks.

Põhiline muudatuste tuvastamine

Lihtsaim viis useFormState'iga muudatuste tuvastamiseks on kasutada hook'i pakutavaid uuendusfunktsioone. Neid funktsioone kutsutakse tavaliselt sisendväljade onChange sündmuste käsitlejates.

Näide:

import React, { useState } from 'react';

const useFormState = () => {
  const [formState, setFormState] = useState({
    firstName: '',
    lastName: '',
    email: '',
  });

  const updateField = (field, value) => {
    setFormState(prevState => ({
      ...prevState,
      [field]: value,
    }));
  };

  return {
    formState,
    updateField,
  };
};

const MyForm = () => {
  const { formState, updateField } = useFormState();

  const handleChange = (event) => {
    const { name, value } = event.target;
    updateField(name, value);
  };

  return (
    

      
        Eesnimi:
        
      
      
        Perekonnanimi:
        
      
      
        E-post:
        
      
      
Eesnimi: {formState.firstName}
      
Perekonnanimi: {formState.lastName}
      
E-post: {formState.email}
    
  );
};

export default MyForm;

Selles näites kutsutakse handleChange funktsioon välja iga kord, kui sisendväli muutub. Seejärel kutsub see välja updateField funktsiooni, mis uuendab vastavat välja formState'is. See käivitab komponendi uuesti renderdamise, peegeldades uuendatud väärtust kasutajaliideses.

Eelmise vormi oleku jälgimine

Mõnikord on vaja võrrelda praegust vormi olekut eelmise olekuga, et teha kindlaks, mis on muutunud. See võib olla kasulik selliste funktsioonide nagu tagasivõtmise/uuestitegemise rakendamiseks või muudatuste kokkuvõtte kuvamiseks.

Näide:

import React, { useState, useRef, useEffect } from 'react';

const useFormStateWithPrevious = () => {
  const [formState, setFormState] = useState({
    firstName: '',
    lastName: '',
    email: '',
  });

  const previousFormStateRef = useRef(formState);

  useEffect(() => {
    previousFormStateRef.current = formState;
  }, [formState]);

  const updateField = (field, value) => {
    setFormState(prevState => ({
      ...prevState,
      [field]: value,
    }));
  };

  return {
    formState,
    updateField,
    previousFormState: previousFormStateRef.current,
  };
};

const MyFormWithPrevious = () => {
  const { formState, updateField, previousFormState } = useFormStateWithPrevious();

  const handleChange = (event) => {
    const { name, value } = event.target;
    updateField(name, value);
  };

  useEffect(() => {
    console.log('Praegune vormi olek:', formState);
    console.log('Eelmine vormi olek:', previousFormState);
    // Võrdle siin praegust ja eelmist olekut
    const changes = Object.keys(formState).filter(
      key => formState[key] !== previousFormState[key]
    );
    if (changes.length > 0) {
      console.log('Muudatused:', changes);
    }
  }, [formState, previousFormState]);

  return (
    

      
        Eesnimi:
        
      
      
        Perekonnanimi:
        
      
      
        E-post:
        
      
      
Eesnimi: {formState.firstName}
      
Perekonnanimi: {formState.lastName}
      
E-post: {formState.email}
    
  );
};

export default MyFormWithPrevious;

Selles näites kasutatakse useRef hook'i eelmise vormi oleku salvestamiseks. useEffect hook uuendab previousFormStateRef'i iga kord, kui formState muutub. Samuti võrdleb useEffect praegust ja eelmist olekut muudatuste tuvastamiseks.

Sügav võrdlus keeruliste objektide jaoks

Kui teie vormi olek sisaldab keerulisi objekte või massiive, ei pruugi lihtne võrdsuse kontroll (=== või !==) olla piisav. Sellistel juhtudel peate tegema sügava võrdluse, et kontrollida, kas pesastatud omaduste väärtused on muutunud.

Näide lodashi isEqual'i kasutamisega:

import React, { useState, useRef, useEffect } from 'react';
import isEqual from 'lodash/isEqual';

const useFormStateWithDeepCompare = () => {
  const [formState, setFormState] = useState({
    address: {
      street: '',
      city: '',
      country: '',
    },
    preferences: {
      newsletter: false,
      notifications: true,
    },
  });

  const previousFormStateRef = useRef(formState);

  useEffect(() => {
    previousFormStateRef.current = formState;
  }, [formState]);

  const updateField = (field, value) => {
    setFormState(prevState => ({
      ...prevState,
      [field]: value,
    }));
  };

  return {
    formState,
    updateField,
    previousFormState: previousFormStateRef.current,
  };
};

const MyFormWithDeepCompare = () => {
  const { formState, updateField, previousFormState } = useFormStateWithDeepCompare();

  const handleChange = (event) => {
    const { name, value } = event.target;
    updateField(name, value);
  };

  const handleAddressChange = (field, value) => {
    updateField('address', {
      ...formState.address,
      [field]: value,
    });
  };

  useEffect(() => {
    if (!isEqual(formState, previousFormState)) {
      console.log('Vormi olek muutus!');
      console.log('Praegune:', formState);
      console.log('Eelmine:', previousFormState);
    }
  }, [formState, previousFormState]);

  return (
    

      
Aadress
      
        Tänav:
         handleAddressChange('street', e.target.value)}
        />
      
      
        Linn:
         handleAddressChange('city', e.target.value)}
        />
      
      
        Riik:
         handleAddressChange('country', e.target.value)}
        />
      
      
Eelistused
      
        Uudiskiri:
         updateField('preferences', { ...formState.preferences, newsletter: e.target.checked })}
        />
      
      
        Teavitused:
         updateField('preferences', { ...formState.preferences, notifications: e.target.checked })}
        />
      
    
  );
};

export default MyFormWithDeepCompare;

See näide kasutab isEqual funktsiooni lodash teegist, et sooritada praeguse ja eelmise vormi oleku sügav võrdlus. See tagab, et pesastatud omaduste muudatused tuvastatakse korrektselt.

Märkus: Sügav võrdlus võib suurte objektide puhul olla arvutuslikult kulukas. Kaaluge optimeerimist, kui jõudlus muutub probleemiks.

Jõudluse optimeerimine useFormState'iga

Tõhus muudatuste tuvastamine on Reacti vormide jõudluse optimeerimiseks ülioluline. Tarbetud uuesti renderdamised võivad põhjustada aeglase kasutajakogemuse. Siin on mõned tehnikad jõudluse optimeerimiseks useFormState'i kasutamisel.

Memoisation

Memoisation on tehnika, mille abil salvestatakse kulukate funktsioonikutsungite tulemused vahemällu ja tagastatakse vahemällu salvestatud tulemus, kui samad sisendid uuesti esinevad. Reacti vormide kontekstis saab memoisationit kasutada komponentide tarbetute uuesti renderdamiste vältimiseks, mis sõltuvad vormi olekust.

React.memo kasutamine:

React.memo on kõrgema järgu komponent, mis memoiseerib funktsionaalse komponendi. See renderdab komponendi uuesti ainult siis, kui selle prop'id on muutunud.

import React from 'react';

const MyInput = React.memo(({ value, onChange, label, name }) => {
  console.log(`Renderdan ${name} sisendit`);
  return (
    
      {label}:
      
    
  );
});

export default MyInput;

Mähkige sisendkomponendid React.memo'ga ja rakendage kohandatud areEqual funktsioon, et vältida tarbetuid uuesti renderdamisi prop'ide muudatuste põhjal.

Valikulised oleku uuendused

Vältige kogu vormi oleku uuendamist, kui muutub ainult üks väli. Selle asemel uuendage ainult seda konkreetset välja, mida on muudetud. See võib vältida komponentide tarbetuid uuesti renderdamisi, mis sõltuvad vormi oleku teistest osadest.

Eelnevalt toodud näited demonstreerivad valikulisi oleku uuendusi.

useCallback kasutamine sündmuste käsitlejate jaoks

Kui edastate sündmuste käsitlejaid prop'idena alamkomponentidele, kasutage käsitlejate memoiseerimiseks useCallback'i. See takistab alamkomponentide tarbetut uuesti renderdamist, kui vanemkomponent uuesti renderdatakse.

import React, { useCallback } from 'react';

const MyForm = () => {
  const { formState, updateField } = useFormState();

  const handleChange = useCallback((event) => {
    const { name, value } = event.target;
    updateField(name, value);
  }, [updateField]);

  return (
    

      
      {/* Teised sisendkomponendid */}
    
  );
};

Debouncing ja Throttling

Sisendväljade puhul, mis käivitavad sagedasi uuendusi (nt otsinguväljad), kaaluge debouncing'u või throttling'u kasutamist uuenduste arvu piiramiseks. Debouncing lükkab funktsiooni täitmise edasi, kuni on möödunud teatud aeg viimasest väljakutsumisest. Throttling piirab funktsiooni täitmise sagedust.

Täiustatud tehnikad vormi oleku haldamiseks

Lisaks muudatuste tuvastamise põhitõdedele on mitmeid täiustatud tehnikaid, mis võivad teie vormi oleku haldamise võimekust veelgi parandada.

Vormi valideerimine useFormState'iga

Vormi valideerimise integreerimine useFormState'iga võimaldab teil anda kasutajatele reaalajas tagasisidet ja vältida kehtetute andmete esitamist.

Näide:

import React, { useState, useEffect } from 'react';

const useFormStateWithValidation = () => {
  const [formState, setFormState] = useState({
    firstName: '',
    lastName: '',
    email: '',
  });
  const [errors, setErrors] = useState({
    firstName: '',
    lastName: '',
    email: '',
  });

  const updateField = (field, value) => {
    setFormState(prevState => ({
      ...prevState,
      [field]: value,
    }));
  };

  const validateField = (field, value) => {
    switch (field) {
      case 'firstName':
        if (!value) {
          return 'Eesnimi on kohustuslik';
        }
        return '';
      case 'lastName':
        if (!value) {
          return 'Perekonnanimi on kohustuslik';
        }
        return '';
      case 'email':
        if (!value) {
          return 'E-post on kohustuslik';
        }
        if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(value)) {
          return 'Vigane e-posti formaat';
        }
        return '';
      default:
        return '';
    }
  };

  useEffect(() => {
    setErrors(prevErrors => ({
      ...prevErrors,
      firstName: validateField('firstName', formState.firstName),
      lastName: validateField('lastName', formState.lastName),
      email: validateField('email', formState.email),
    }));
  }, [formState]);

  const isValid = Object.values(errors).every(error => !error);

  return {
    formState,
    updateField,
    errors,
    isValid,
  };
};

const MyFormWithValidation = () => {
  const { formState, updateField, errors, isValid } = useFormStateWithValidation();

  const handleChange = (event) => {
    const { name, value } = event.target;
    updateField(name, value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (isValid) {
      alert('Vorm edukalt esitatud!');
    } else {
      alert('Palun parandage vormis olevad vead.');
    }
  };

  return (
    

      
        Eesnimi:
        
        {errors.firstName && 
{errors.firstName}
}
      
      
        Perekonnanimi:
        
        {errors.lastName && 
{errors.lastName}
}
      
      
        E-post:
        
        {errors.email && 
{errors.email}
}
      
      Esita
    
  );
};

export default MyFormWithValidation;

See näide sisaldab iga välja valideerimisloogikat ja kuvab kasutajale veateateid. Esitamisnupp on keelatud, kuni vorm on kehtiv.

Asünkroonne vormi esitamine

Vormide puhul, mis nõuavad asünkroonseid operatsioone (nt andmete esitamine serverile), saate integreerida asünkroonse esitamise käsitlemise useFormState'i.

import React, { useState } from 'react';

const useFormStateWithAsyncSubmit = () => {
  const [formState, setFormState] = useState({
    firstName: '',
    lastName: '',
    email: '',
  });
  const [isLoading, setIsLoading] = useState(false);
  const [submissionError, setSubmissionError] = useState(null);

  const updateField = (field, value) => {
    setFormState(prevState => ({
      ...prevState,
      [field]: value,
    }));
  };

  const handleSubmit = async () => {
    setIsLoading(true);
    setSubmissionError(null);
    try {
      // Simuleeri API-kutset
      await new Promise(resolve => setTimeout(resolve, 2000));
      console.log('Vormi andmed:', formState);
      alert('Vorm edukalt esitatud!');
    } catch (error) {
      console.error('Esitamise viga:', error);
      setSubmissionError('Vormi esitamine ebaõnnestus. Palun proovige uuesti.');
    } finally {
      setIsLoading(false);
    }
  };

  return {
    formState,
    updateField,
    handleSubmit,
    isLoading,
    submissionError,
  };
};

const MyFormWithAsyncSubmit = () => {
  const { formState, updateField, handleSubmit, isLoading, submissionError } = useFormStateWithAsyncSubmit();

  const handleChange = (event) => {
    const { name, value } = event.target;
    updateField(name, value);
  };

  return (
    

      
        Eesnimi:
        
      
      
        Perekonnanimi:
        
      
      
        E-post:
        
      
      
        {isLoading ? 'Esitan...' : 'Esita'}
      
      {submissionError && 
{submissionError}
}
    
  );
};

export default MyFormWithAsyncSubmit;

See näide sisaldab laadimise ja vea olekut, et anda kasutajale tagasisidet asünkroonse esitamisprotsessi ajal.

Reaalse maailma näited ja kasutusjuhud

Selles juhendis käsitletud tehnikaid saab rakendada laias valikus reaalsetes stsenaariumides. Siin on mõned näited:

• E-kaubanduse ostukorvi vormid: Tarneaadresside, makseteabe ja tellimuste kokkuvõtete haldamine.
• Kasutajaprofiili vormid: Kasutajaandmete, eelistuste ja turvaseadete uuendamine.
• Kontaktivormid: Kasutajate päringute ja tagasiside kogumine.
• Küsitlused ja ankeedid: Kasutajate arvamuste ja andmete kogumine.
• Tööle kandideerimise vormid: Kandidaatide teabe ja kvalifikatsioonide kogumine.
• Seadete paneelid: Rakenduse seadete, tumeda/heleda teema, keele, ligipääsetavuse haldamine.

Globaalse rakenduse näide Kujutage ette globaalset e-kaubanduse platvormi, mis võtab vastu tellimusi paljudest riikidest. Vorm peaks dünaamiliselt kohandama valideerimist vastavalt valitud tarneriigile (nt postiindeksite formaadid erinevad). UseFormState koos riigipõhiste valideerimisreeglitega võimaldab puhast ja hooldatavat lahendust. Kaaluge rahvusvahelistumise abistamiseks teegi nagu `i18n-iso-countries` kasutamist.

Kokkuvõte

Reacti useFormState hook'i abil muudatuste tuvastamise valdamine on reageerivate, jõudlusvõimeliste ja kasutajasõbralike vormide loomiseks hädavajalik. Mõistes erinevaid tehnikaid muudatuste jälgimiseks, vormi olekute võrdlemiseks ja jõudluse optimeerimiseks, saate luua vorme, mis pakuvad sujuvat kasutajakogemust. Olenemata sellest, kas loote lihtsat kontaktivormi või keerulist e-kaubanduse ostuprotsessi, aitavad selles juhendis kirjeldatud põhimõtted teil luua robustseid ja hooldatavaid vormilahendusi.

Pidage meeles arvestada oma rakenduse spetsiifiliste nõuetega ja valida tehnikad, mis vastavad kõige paremini teie vajadustele. Pidevalt õppides ja erinevate lähenemisviisidega katsetades saate saada vormi oleku haldamise eksperdiks ja luua erakordseid kasutajaliideseid.